<template>
    <view class="container">
      <view class="title">材料提交</view>
      
      <view class="progress-container">
        <view class="progress-text">材料提交进度</view>
        <progress :percent="submissionProgress" stroke-width="10" color="#3c8dbc" />
        <view class="progress-percent">{{ submissionProgress }}%</view>
      </view>
      
      <view class="material-list">
        <view class="material-item card" v-for="(item, index) in materialList" :key="index">
          <view class="material-info">
            <view class="material-name">{{ item.name }}</view>
            <view class="material-desc">{{ item.description }}</view>
            <view class="material-status" :class="getStatusClass(item.status)">
              {{ getStatusText(item.status) }}
            </view>
          </view>
          
          <view class="material-preview" v-if="item.fileUrl">
            <image :src="item.fileUrl" mode="aspectFill" @click="previewImage(item.fileUrl)"></image>
          </view>
          
          <view class="material-actions">
            <button 
              class="btn-upload" 
              :disabled="item.status === 'approved'"
              @click="uploadMaterial(item.type)"
            >
              {{ item.fileUrl ? '重新上传' : '上传' }}
            </button>
          </view>
        </view>
      </view>
      
      <view class="action-container">
        <button 
          class="btn-primary btn-block" 
          :disabled="submissionProgress < 100" 
          @click="completeSubmission"
        >
          提交审核
        </button>
        
        <button 
          class="btn-default btn-block" 
          style="margin-top: 20rpx;" 
          @click="navigateBack"
        >
          返回
        </button>
      </view>
    </view>
  </template>
  
  <script>
  import { mapActions, mapGetters } from 'vuex';
  import config from '@/config/index';
  
  export default {
    data() {
      return {
        enrollmentId: '',
        materialList: [
          {
            type: 'id_card_front',
            name: '身份证正面',
            description: '请上传清晰的身份证正面照片',
            status: 'pending',
            fileUrl: '',
            required: true
          },
          {
            type: 'id_card_back',
            name: '身份证反面',
            description: '请上传清晰的身份证反面照片',
            status: 'pending',
            fileUrl: '',
            required: true
          },
          {
            type: 'photo',
            name: '一寸免冠照',
            description: '请上传白底一寸免冠照片',
            status: 'pending',
            fileUrl: '',
            required: true
          },
          {
            type: 'health_certificate',
            name: '体检证明',
            description: '请上传体检证明照片',
            status: 'pending',
            fileUrl: '',
            required: false
          }
        ]
      };
    },
    computed: {
      ...mapGetters('enrollment', [
        'materials'
      ]),
      submissionProgress() {
        // 计算已提交的必需材料百分比
        const requiredCount = this.materialList.filter(item => item.required).length;
        const submittedCount = this.materialList.filter(item => item.required && item.fileUrl).length;
        return requiredCount ? Math.floor((submittedCount / requiredCount) * 100) : 0;
      }
    },
    onLoad(options) {
      if (options.id) {
        this.enrollmentId = options.id;
        this.getMaterials(this.enrollmentId).then(() => {
          this.updateMaterialList();
        });
      } else {
        this.showToast('参数错误');
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      }
    },
    methods: {
      ...mapActions('enrollment', [
        'uploadMaterial',
        'getMaterials'
      ]),
      updateMaterialList() {
        // 根据从服务器获取的材料更新本地列表
        if (this.materials && this.materials.length > 0) {
          this.materials.forEach(material => {
            const index = this.materialList.findIndex(item => item.type === material.material_type);
            if (index !== -1) {
              this.materialList[index].status = material.status;
              this.materialList[index].fileUrl = material.file_url;
            }
          });
        }
      },
      getStatusText(status) {
        const statusMap = {
          'pending': '待上传',
          'uploaded': '待审核',
          'approved': '已通过',
          'rejected': '已拒绝'
        };
        return statusMap[status] || status;
      },
      getStatusClass(status) {
        const classMap = {
          'pending': 'status-pending',
          'uploaded': 'status-uploaded',
          'approved': 'status-approved',
          'rejected': 'status-rejected'
        };
        return classMap[status] || '';
      },
      uploadMaterial(type) {
        // 选择图片
        uni.chooseImage({
          count: 1,
          sizeType: ['compressed'],
          sourceType: ['album', 'camera'],
          success: res => {
            const tempFilePath = res.tempFilePaths[0];
            
            // 显示上传中
            uni.showLoading({
              title: '上传中...'
            });
            
            // 上传文件
            this.uploadMaterial({
              enrollmentId: this.enrollmentId,
              materialType: type,
              filePath: tempFilePath
            })
              .then(res => {
                uni.hideLoading();
                
                // 更新本地列表
                const index = this.materialList.findIndex(item => item.type === type);
                if (index !== -1) {
                  this.materialList[index].status = 'uploaded';
                  this.materialList[index].fileUrl = res.file_url;
                }
                
                this.showToast('上传成功', 'success');
              })
              .catch(err => {
                uni.hideLoading();
                this.showToast(err.message || '上传失败');
              });
          }
        });
      },
      previewImage(url) {
        uni.previewImage({
          urls: [url],
          current: url
        });
      },
      completeSubmission() {
      if (this.submissionProgress < 100) {
        this.showToast('请先上传所有必需材料');
        return;
      }
      
      this.showModal('确认提交所有材料进行审核？')
        .then(confirm => {
          if (confirm) {
            uni.navigateTo({
              url: `/pages/enrollment/status/status?id=${this.enrollmentId}`
            });
          }
        });
    },
    navigateBack() {
      uni.navigateBack();
    }
  }
};
</script>

<style lang="scss">
.container {
  padding: 30rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40rpx;
}

.progress-container {
  margin-bottom: 40rpx;
}

.progress-text {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.progress-percent {
  text-align: right;
  font-size: 24rpx;
  color: #3c8dbc;
  margin-top: 10rpx;
}

.material-list {
  margin-bottom: 40rpx;
}

.material-item {
  margin-bottom: 20rpx;
}

.material-info {
  margin-bottom: 20rpx;
}

.material-name {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.material-desc {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.material-status {
  display: inline-block;
  font-size: 24rpx;
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
}

.status-pending {
  background-color: #f0f0f0;
  color: #999;
}

.status-uploaded {
  background-color: #e6f7ff;
  color: #1890ff;
}

.status-approved {
  background-color: #e6f7f0;
  color: #52c41a;
}

.status-rejected {
  background-color: #fff3f3;
  color: #f56c6c;
}

.material-preview {
  margin-bottom: 20rpx;
}

.material-preview image {
  width: 200rpx;
  height: 200rpx;
  border: 1px solid #eee;
  border-radius: 6rpx;
}

.material-actions {
  display: flex;
  justify-content: flex-end;
}

.btn-upload {
  width: 200rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 28rpx;
  color: #3c8dbc;
  background-color: transparent;
  border: 1px solid #3c8dbc;
  border-radius: 6rpx;
}

.action-container {
  margin-top: 60rpx;
}

.btn-block {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  font-size: 32rpx;
  border-radius: 8rpx;
}

.btn-primary {
  color: #fff;
  background-color: #3c8dbc;
}

.btn-default {
  color: #666;
  background-color: #f8f8f8;
  border: 1px solid #ddd;
}
</style>